<!--
 * @Author: Aaron
 * @Date: 2022-03-09 17:30:31
 * @LastEditors: YanMeng
 * @LastEditTime: 2022-11-01 11:59:29
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\spuManagement\index\spuSeriesMaintain.vue
 * @Company: 沃尔玛
-->
<template>
  <div v-loading="loading" class="spuSeriesMaintain">
    <spuSeries v-if="verification" />
    <dialogTableInfo
      v-model="dialogVisible"
      :thead-list="theadList"
      :data-list="dataList"
      :slot-list="slotList"
      confirm-content="关闭当前页面，是否继续？"
      @dialogVisibleChange="dialogVisibleChange"
      @selectionChange="selectionChange"
    >
      <el-button-group slot="right" class="btn">
        <el-button type="primary" :loading="loading" :disabled="!multipleSelection.length" icon="el-icon-s-promotion" size="mini" round @click="handleEdit">
          继续编辑
        </el-button>
      </el-button-group>
    </dialogTableInfo>
  </div>
</template>

<script>
import spuSeries from './spuSeries.vue'
import dialogTableInfo from '@/components/dialogTableInfo/dialogTableInfo.vue'
import { spuErrInfoList as theadList } from '@/views/coi/commonJs/spuTableHeader.js'
import { getchgSpuDetailById, initChgSpu } from '@/api/coi/onlineTaskAPI/spuEdit.js'

import bus from '@/utils/eventBus.js'

export default {
  name: 'SpuSeriesMaintain',
  components: {
    spuSeries,
    dialogTableInfo
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      verification: false,
      theadList,
      dataList: [],
      interval: null,
      slotList: ['right'],
      multipleSelection: []
    }
  },
  created() {
    this.loading = true
    this.interval = setInterval(this.getVerificationInfoRequest, 2000)
    this.getVerificationInfoRequest()
  },
  beforeDestroy() {
    if (this.interval) window.clearInterval(this.interval)
  },
  methods: {
    async getVerificationInfoRequest(chgSpuId = this.$route.params.spuId) {
      try {
        const { result } = await getchgSpuDetailById({ chgSpuId })
        if (!result) return
        if (result.chgSpuProcessStatus && result.chgSpuProcessStatus.mainStatus) {
          const status = result.chgSpuProcessStatus.mainStatus
          if (status === 102) {
            window.clearInterval(this.interval)
            this.dataList = result.skuInfoList || []
            this.dialogVisible = true
          } else if (status === 201) {
            this.verification = true
            window.clearInterval(this.interval)
          }
        }
      } catch (err) {
        console.log(err)
        window.clearInterval(this.interval)
      } finally {
        this.loading = false
      }
    },
    dialogVisibleChange() {
      bus.$emit('closeTag', this.$route)
    },
    selectionChange(val) {
      this.multipleSelection = val
    },
    async handleEdit() {
      try {
        this.loading = true
        const data = {
          chgSpuId: this.$route.params.spuId,
          upcList: this.multipleSelection.map((_) => _.upcNbr)
        }
        const { result } = await initChgSpu(data, this.$route.query.menuName, this.$route.query.isModify)
        if (!result) {
          this.dialogVisible = true
          return
        }
        this.interval = setInterval(() => {
          this.getVerificationInfoRequest(result)
        }, 2000)
        await this.getVerificationInfoRequest(result)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.spuSeriesMaintain {
  height: 100%;
}
.btn {
  padding-bottom: 10px;
}
</style>
